<template>
    <div align="center">
        {{ binds }}
        <h1>Show</h1>
        商铺名称: <input type="text" v-model="pages.ushop">
        房屋状态:
        <select v-model="pages.uid">
            <option value=-1>请选择(默认显示全部)</option>
            <option v-for="item in binds" :value="item.id">{{ item.houseState }}</option>
        </select>

        <input type="button" value="查询" @click="Shows()">

        <table class="table table-bordered" border="1" cellspacing="0" cellpadding="0" width="1000">
            <tbody>
                <tr align="center">
                <td>商铺名称</td>
                <td>楼层</td>
                <td>业主/租户</td>
                <td>联系电话</td>
                <td>建筑/室内面积</td>
                <td>组件(元/平方)</td>
                <td>商铺状态</td>
                <td>起租时间</td>
                <td>操作</td>
            </tr>
            <tr align="center" v-for="item in dates.list" :key="item.id">
                <td>{{ item.shopName }}</td>
                <td>{{ item.hights }}</td>
                <td>{{ item.userName }}</td>
                <td>{{ item.phone.substr(0, 3) + "****" + item.phone.substr(7) }}</td>
                <td>{{ item.houseMian }}</td>
                <td>{{ item.pirces }}</td>
                <!-- 当item.state==1时,字体为蓝色 -->
                <td v-if="item.state == 1" style="color:green">{{ item.state == 1 ? '出租中' : '空置' }}</td>
                <td v-if="item.state == 2" style="color:blue">{{ item.state == 1 ? '出租中' : '空置' }}</td>
                <td>{{ item.strDate }}</td>
                <td>
                    <input type="button" value="编辑" @click="updates(item.id)">
                    &nbsp;
                    <input type="button" value="删除" @click="del(item.id)">
                </td>
            </tr>
            </tbody>
        </table>
        <div align="center">
            当前第{{ pages.pageIndex }}页,共{{ dates.totalPage }}页,共{{ dates.totaCount }}条数据<br>
            <input type="button" value="首页" @click="pages.pageIndex = 1, Shows()">
            <input type="button" value="上一页" @click="pages.pageIndex--, Shows()">
            <input type="button" value="下一页" @click="pages.pageIndex++, Shows()">
            <input type="button" value="尾页" @click="pages.pageIndex = dates.totalPage, Shows()"><br>
            <input type="text" v-model="pages.pageIndex">
            <input type="button" value="跳转" @click="Shows()"> <br>
            跳转到第<span v-for="item in dates.totalPage" @click="pages.pageIndex = item, Shows()" :key="item"> {{ item }}
                &nbsp; </span>页
        </div>
    </div>
</template>


<script setup lang="ts">

import axios from 'axios';
import { reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();

let dates: any = reactive({
    list: [],
    totalPage: 0,
    totaCount: 0
});

let pages: any = reactive({
    pageIndex: 1,
    pageSize: 2,
    ushop: "",
    uid: "-1"
})

onMounted(() => {
    Bind();
    Shows();
})

const  updates = (uid: number) => {
    router.push({ path: "/update", query: { uid } })
}

const del = (uid: number) => {
    axios({
        url: "/api/Hotel/DeleteShop",
        method: "put",
        params: { uid }
    }).then((res) => {
        //确认要删除吗

        if (confirm("确认要删除吗")) {

            if (res.data > 0) {
                alert("删除成功");
                Shows();
            } else {
                alert("删除失败");
            }
        }
    })
}

//git
let binds: any = reactive({})

const Bind = () => {
    axios({
        url: "/api/Hotel/Bind",
        method: "get"
    }).then((res) => {
        binds = res.data;
        console.log(res.data);
    })
}
//刚才豆腐干恢复和
const Shows = () => { 
    
    axios({
        url: "/api/Hotel/Shows",
        method: "get",
        params: pages
    }).then((res) => {
        dates.list = res.data.list;
        dates.totalPage = res.data.totalPage;
        dates.totaCount = res.data.totaCount;
    }) 
}
</script>

<style scoped></style>